<template>
	<view class="content">
		<image src="@/static/image/login-bg.jpg" mode="widthFix" class="bg"></image>
		<view class="login">
			<view class="formItem">
				<view class="lab">手机号</view>
				<input class="uni-input" v-model.trim="form.mobile" placeholder="请输入手机号" placeholder-style="color:#ccc"/>
			</view>
			<view class="formItem">
				<view class="lab">密码</view>
				<input class="uni-input" v-model.trim="form.password" placeholder="请输入登录密码" 
					:password="hidePwd" placeholder-style="color:#ccc" />
				<uni-icons type="eye-slash" size="26" class="eye" color="#999999"v-if="hidePwd" @click="hidePwd=false"></uni-icons>
				<uni-icons type="eye" size="26" class="eye" color="#999999"v-else @click="hidePwd=true"></uni-icons>
			</view>
			<view class="read" style="justify-content: space-between;">
				<view @click="openForget">忘记密码</view>
				<checkbox-group @change="changeChecked">
					<label>
						<checkbox :checked="isChecked" value="1" color="#4EB0FF" style="transform:scale(0.7);position: relative;top: -3rpx;" />
						保存账号
					</label>
				</checkbox-group>
			</view>
		</view>
		<button class="primary" @tap="submitLogin()">登录</button>
		<view class="read" @click="routerRegister">立即注册</view>
		
		<uni-popup ref="forget">
			<view class="forgetBoxs">
				<uni-icons type="closeempty" size="20" class="close" color="#999999" @click="closeForget"></uni-icons>
				<view class="title">找回密码</view>
				<view class="cont">
					<view class="text">请添加下方客服微信号申请重置密码</view>
					<view class="item">
						<view>{{custome_wechat}}</view>
						<uni-tag text="点击复制" type="success" class="ml10" size="small" @click="copy(custome_wechat)"/>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import common from '@/static/js/common.js';
	
	export default {
		data() {
			return {
				isChecked: false,
				hidePwd: true,
				custome_wechat: '',
				form: {
					mobile: '',
					password: ''
				},
				rules: [
					{name: 'mobile', rule: 'empty', msg: '手机号不能为空'},
					{name: 'mobile', rule: 'mobile', msg: '手机号格式错误'},
					{name: 'password', rule: 'empty', msg: '密码不能为空'}
				]
			}
		},
		onShow() {
			if (uni.getStorageSync('mobile') && uni.getStorageSync('mobile') != '') {
				this.form.mobile = uni.getStorageSync('mobile')
				this.form.password = uni.getStorageSync('password')
			} else {
				uni.removeStorageSync('token');
			}
		},
		methods: {
			changeChecked(e) {
				if (e.detail.value.length > 0) {
					this.isChecked = true
				} else {
					this.isChecked = false
				}
			},
			openForget() {
				let that = this;
				common.api({
					method: 'POST',
					url: '/mobile/index/getConfig',
					success: function(res) {
						if (res.code != 0) {
							uni.showToast({ title: res.msg, icon: 'none' });
							return false;
						}
						that.custome_wechat = res.data.custome_wechat
						that.$refs.forget.open()
					},
					error: function () {
						uni.showToast({ title: '数据请求异常', icon: 'none' });
					}
				});
			},
			closeForget() {
				this.$refs.forget.close()
			},
			copy(data) {
				uni.setClipboardData({
					data: data,
					success: () => {}
				});
			},
			routerRegister() {
				uni.reLaunch({url:'/pages/login/register'})
			},
			submitLogin() {
				let that = this;
				let valid = common.validator(that.rules, that.form)
				if (!valid.validator) { uni.showToast({ title: valid.msg, icon: 'none' });return false;}
				common.api({
					method: 'POST',
					url: '/mobile/user/login',
					data: {
						mobile: that.form.mobile,
						password: that.form.password
					},
					success: function(res) {
						if (res.code != 0) {
							uni.showToast({ title: res.msg, icon: 'none' });
							return false;
						}
						// uni.showToast({ title: '用户登录成功', icon: 'success' });
						if (that.isChecked) {
							uni.setStorageSync('mobile', that.form.mobile);
							uni.setStorageSync('password', that.form.password);
						}
						uni.setStorageSync('token', res.data.token);
						uni.reLaunch({url:'/pages/index/index'})
					},
					error: function () {
						uni.showToast({ title: '数据请求异常', icon: 'none' });
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100vw;
		min-height: 100vh;
		position: relative;
		.bg {
			display: block;
			width: 100vw;
		}
		.ways {
			padding-top: 20rpx;
		}
		.login {
			background-color: #fff;
			padding: 0 20rpx 20rpx;
		}
		.read {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			color: #999;
			text {
				color: #000;
				position: relative;
				top: -5rpx;
			}
		}
		.primary {
			width: 80vw;
			margin: 60rpx auto 40rpx;
		}
	}
	.forgetBoxs {
		width: 90vw;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		.close {
			position: absolute;
			right: 20rpx;
			top: 10rpx;
		}
		.title {
			font-size: 32rpx;
			text-align: center;
			line-height: 80rpx;
			background-color: #f1f1f1;
		}
		.cont {
			padding: 32rpx;
			.text {
				text-align: center;
				margin-bottom: 30rpx;
			}
			.item {
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>
